<template>
  <el-drawer v-model="dialogVisible" title="设置配置" size="800px" :close-on-click-modal="false" append-to-body width="620"
    class="editDialog" align-center>
    <div class="title">
      <span>通道显示设置</span>
      <el-button type="primary" @click="editSetting" v-if="!inEdit" class="editBtn">修改</el-button>
      <template v-else>
        <el-button type="primary" @click="saveSetting" class="editBtn">保存</el-button>
        <el-button @click="cancelSetting">取消</el-button>
      </template>
    </div>
    <el-table :data="tableData" border row-key="id" style="width: 100%; margin-top: 20px"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column header-align="center" prop="adNo" label="通道号" width="60" />
      <el-table-column header-align="center" prop="snCode" label="设备号" />
      <el-table-column header-align="center" prop="engineeringUnit" label="工程单位">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.engineeringUnit }}</span>
          <el-input v-model="scope.row.engineeringUnit" v-if="inEdit" placeholder="请输入工程单位" :disabled="!inEdit" />

        </template>
      </el-table-column>

      <el-table-column header-align="center" prop="adEuCalValue" label="标定值">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.adEuCalValue }}</span>
          <el-input v-model="scope.row.adEuCalValue" v-else />
        </template>
      </el-table-column>

      <el-table-column header-align="center" prop="adDcOffsetValue" label="直流偏移" width="120">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.adDcOffsetValue }}</span>
          <el-input-number v-model="scope.row.adDcOffsetValue" v-else class="inputNumber" />
        </template>
      </el-table-column>

      <el-table-column header-align="center" prop="adCoupleMode" label="AC/DC">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.adCoupleMode }}</span>
          <el-select  v-model="scope.row.adCoupleMode" v-else placeholder="请选择">
            <el-option v-for="item in acdcOptions" :key="item.val"  :label="item.label" :value="item.val" /> 
          </el-select>
        </template>
      </el-table-column>

      <el-table-column header-align="center" prop="adInputMode" label="输入模式">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.adInputMode }}</span>
          <el-select v-model="scope.row.adInputMode" v-else placeholder="请选择">
           <el-option v-for="item in inputModeOptions" :key="item.val"  :label="item.label" :value="item.val" /> 
          </el-select>
        </template>
      </el-table-column>

      <el-table-column header-align="center" prop="isUser" label="是否使用">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.isUser === 1 ? '是' : '否' }}</span>
          <el-select v-model="scope.row.isUser" v-else placeholder="请选择">
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column header-align="center" prop="remark" label="备注">
        <template #default="scope">
          <span v-if="!inEdit">{{ scope.row.remark }}</span>
          <el-input v-model="scope.row.remark" v-else />
        </template>
      </el-table-column>

    </el-table>

  </el-drawer>
</template>

<script setup>
import { ref, defineExpose } from "vue";
import { saveSettingPage, getSettingPage } from "../../../utils/requests";
import { ElMessage } from "element-plus";


let dialogVisible = ref(false);
let tableData = ref([]);
let originalData = ref([]);
let snCode = ref("");

let inEdit = ref(false);

const openDialog = (sncode) => {
  dialogVisible.value = true;
  snCode.value = sncode;
  inEdit.value = false;

  getSet();
};

const acdcOptions = ref([
  { val: 'ac', label: "AC" },
  { val: 'dc', label: "DC" }
]);

const inputModeOptions = ref([
  { val: '5v', label: "5V" },
  { val: '12v', label: "12V" },
  { val: '24v', label: "24V" },
  { val: 'no_excitation', label: "no_excitation" },
  { val: 'full_bridge', label: "full_bridge" },
  { val: 'half_bridge', label: "half_bridge" },
  { val: 'quarter_bridge', label: "quarter_bridge" }
]);

const getSet = () => {
  getSettingPage({ size: 999, current: 1, snCode: snCode.value }).then((data) => {
    if (data.records && data.records.length > 0) {
      originalData.value = data.records;
      tableData.value = data.records;
    } else {
      originalData.value = [];
      tableData.value = [];
    }
  });
}

const editSetting = () => {
  inEdit.value = true;
};

const cancelSetting = () => {
  inEdit.value = false;
  tableData.value = originalData.value; // 恢复原始数据
}

const saveSetting = () => {
  inEdit.value = false;

  // 提交修改
  saveSettingPage(tableData.value).then(() => {
    ElMessage({
      type: "success",
      message: "设置保存成功",
    });
    getSet()
    //dialogVisible.value = false;
  }).catch(() => {
    ElMessage({
      type: "error",
      message: "设置保存失败",
    });
  });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.title {
  display: flex;

  align-items: center;
  margin-bottom: 20px;

  &:before {
    content: "";
    display: block;
    width: 6px;
    height: 20px;
    background: #409eff;
    margin-right: 5px;
  }

  span {
    font-size: 16px;
    font-weight: bold;


  }

  .editBtn {
    margin-left: 25px;
  }



}

.inputNumber {
  width: 100px;

  :deep(.el-input-number__decrease),
  :deep(.el-input-number__increase) {
    width: 25px;
  }

  :deep(.el-input__wrapper) {
    padding-left: 25px;
    padding-right: 25px;
  }
}
</style>
